<template>
  <a-modal :title="title" :footer="null" :width="1200" :visible="visible" :confirmLoading="confirmLoading"
    switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-card :bordered="false">

      <!-- 查询区域 -->
      <!-- <div class="table-page-search-wrapper">
    		<a-form layout="inline" @keyup.enter.native="searchQuery">
    			<a-row :gutter="24">
    
    				<a-col :xl="6" :lg="7" :md="8" :sm="24">
    					<a-form-item label="examineId">
    						<a-input placeholder="请输入examineId" v-model="queryParam.examineId"></a-input>
    					</a-form-item>
    				</a-col>
    				<a-col :xl="6" :lg="7" :md="8" :sm="24">
    					<a-form-item label="标题">
    						<a-input placeholder="请输入标题" v-model="queryParam.title"></a-input>
    					</a-form-item>
    				</a-col>
    				<template v-if="toggleSearchStatus">
    					<a-col :xl="6" :lg="7" :md="8" :sm="24">
    						<a-form-item label="作者">
    							<a-input placeholder="请输入作者" v-model="queryParam.author"></a-input>
    						</a-form-item>
    					</a-col>
    					<a-col :xl="6" :lg="7" :md="8" :sm="24">
    						<a-form-item label="炼厂id">
    							<a-input placeholder="请输入炼厂id" v-model="queryParam.refineryId"></a-input>
    						</a-form-item>
    					</a-col>
    					<a-col :xl="6" :lg="7" :md="8" :sm="24">
    						<a-form-item label="缩略图">
    							<a-input placeholder="请输入缩略图" v-model="queryParam.image"></a-input>
    						</a-form-item>
    					</a-col>
    				</template>
    				<a-col :xl="6" :lg="7" :md="8" :sm="24">
    					<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
    						<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
    						<a-button type="primary" @click="searchReset" icon="reload"
    							style="margin-left: 8px">重置</a-button>
    						<a @click="handleToggleSearch" style="margin-left: 8px">
    							{{ toggleSearchStatus ? '收起' : '展开' }}
    							<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
    						</a>
    					</span>
    				</a-col>
    
    			</a-row>
    		</a-form>
    	</div> -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleEdit(null)" type="primary" icon="plus">新增</a-button>
        <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
    			<a-menu slot="overlay">
    				<a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
    			</a-menu>
    			<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
    		</a-dropdown> -->
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
            style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource1"
          :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">

          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>

            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.examineId)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>

        </a-table>
      </div>
      <!-- table区域-end -->

      <!-- 表单区域 -->
      <ysyRefineryreport-modal ref="modalForm" @ok="modalFormOk"></ysyRefineryreport-modal>
    </a-card>
  </a-modal>
</template>

<script>
  import YsyRefineryreportModal from './modules/YsyRefineryreportModal'
  import {
    httpAction,
    postAction,
    getAction,
    deleteAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JEditor from '@/components/jeecg/JEditor'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    components: {
      JEditor,
      YsyRefineryreportModal
    },
    name: "YsyRefineryPriceHistModal",
    mixins: [JeecgListMixin],
    data() {
      return {
        dataSource1: [],
        columns: [{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function(t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '标题',
            align: "center",
            dataIndex: 'title'
          },
          // {
          //   title: '缩略图',
          //   align: "center",
          //   dataIndex: 'image'
          // },
          // {
          //   title: '报告图集',
          //   align: "center",
          //   dataIndex: 'images'
          // },
          // {
          //   title: '内容详情',
          //   align: "center",
          //   dataIndex: 'content'
          // },
          {
            title: '点击量',
            align: "center",
            dataIndex: 'hits'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {
              customRender: 'action'
            },
          }
        ],
        url: {
          list: "/app/ysyRefineryreport/list",
          delete: "/app/ysyRefineryreport/delete",
          deleteBatch: "/app/ysyRefineryreport/deleteBatch",
          exportXlsUrl: "app/ysyRefineryreport/exportXls",
          importExcelUrl: "app/ysyRefineryreport/importExcel",
        },
        selectList: [],
        value2: [],
        title: "检测报告",
        visible: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        loading: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        refineryId: '',
        list: [],
        oilRawMaterialIds: [],
        indexs: [],
        status: '',
        refineryItem: '',
        refineryName: '',
        selectList: [],
        selectListName: [],
        oilTypeId: '',
      }
    },
    created() {},
    methods: {
      handleEdit(e) {
        this.$refs.modalForm.edit(e,this.refineryId)
      },
      modalFormOk() {
        this.loadHisData()
      },
      handleChange(e) {
        this.indexs = e
      },
      add() {
        this.edit({});
      },
      edit(record) {
        this.refineryId = record.refineryId
        this.loadHisData()
        this.visible = true
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.refineryId = ''
        this.value2 = []
        this.selectList = []
        this.selectListName = []
        this.clickFlag = true
      },
      handleOk() {
        this.handleCancel()
      },
      handleCancel() {
        this.close()
      },
      handleDelete(id) {
        if (!this.url.delete) {
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {
          id: id
        }).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadHisData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      loadHisData() {
        let params = {
          pageNo: this.ipagination.pageNo,
          pageSize: this.ipagination.pageSize,
          refineryId: this.refineryId,
        }
        getAction(this.url.list, params).then(res => {
          this.dataSource1 = res.result.records
          this.ipagination.total = res.result.total
        })
      },
      handleTableChange() {
        this.loadHisData()
      }

    }
  }
</script>

<style lang="less" scoped>
  .flex-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>